<template>
  <CommondCard title="今日订单" :value="numberFormat(orderToday)">
    <template #default>
      <!-- <v-chart :option="getOption()" style="width:100%;height:100%" autoresize></v-chart> -->
      <div ref="lineChartRef" style="width: 100%; height: 100%"></div>
    </template>
    <template #footer>
      <div>
        昨日订单量 &nbsp;
        <span class="emphasis"> {{ numberFormat(orderLastDay) }}</span>
      </div>
    </template>
  </CommondCard>
</template>

<script lang="ts">
export default {
  name: 'TodayOrders',
};
</script>
<script lang="ts" setup>
import CommondCard from './CommonCard.vue';
import { computed, onMounted, ref, watch } from 'vue';
import * as echarts from 'echarts';
import type { EChartsType } from 'echarts';
import { useReportDataStore } from '@/stores/reportData';
import useFormat from '@/hooks/useFormat';
const { numberFormat, moneyFormat } = useFormat();
const reportDataStore = useReportDataStore();

// 1. 今日订单量
const orderToday = computed(() => reportDataStore.reportData.orderToday);

// 2. 昨日订单量
const orderLastDay = computed(() => reportDataStore.reportData.orderLastDay);

// 3. Y轴的数据
const orderTrend = computed(() => reportDataStore.reportData.orderTrend || []);

// 4. X轴的数据
const orderTrendAxis = computed(
  () => reportDataStore.reportData.orderTrendAxis || []
);

// 获取页面中的标签对象
const lineChartRef = ref();
let lineChart: EChartsType;
const getOption = () => {
  return {
    xAxis: {
      // X轴两侧不留白
      boundaryGap: false,
      /* data: [
        '一月',
        '二月',
        '三月',
        '四月',
        '五月',
        '六月',
        '七月',
        '八月',
        '九月',
        '10月',
        '11月',
        '12月',
      ], */
      data: orderTrendAxis.value,
    },
    yAxis: {
      show: false,
    },
    grid: {
      left: 0,
      top: 0,
      bottom: 0,
      right: 0,
    },
    series: {
      name: '今日订单',
      type: 'line',
      /*  data: [40, 20, 30, 22, 65, 23, 77, 88, 96, 99, 62, 97], */
      data: orderTrend.value,
      // 折线是否平滑
      smooth: true,
      itemStyle: {
        // 去除折线的小圆点
        opacity: 0,
      },
      lineStyle: {
        // 去掉默认的折线
        opacity: 0,
      },
      areaStyle: {
        // 设置折线区域的颜色
        color: 'purple',
      },
    },
    tooltip: {
      // x轴上触发
      trigger: 'axis',
      // 限制在图表区域内
      confine: true,
    },
  };
};

//组件挂载后处理图表
onMounted(() => {
  // 1.先初始化
  lineChart = echarts.init(lineChartRef.value);
  // 2.根据参数来生成图形
  lineChart.setOption(getOption());
  // 3. 实现响应式效果
  window.addEventListener('resize', () => {
    lineChart.resize()
  })
});

watch(orderToday, () => {
  // 当页面中有了数据之后 再重新根据数据还渲染列表
  lineChart.setOption(getOption());
});
</script>

<style></style>
